{% extends 'stark/layout.html' %}

{% block css %}

    <style>
        .user-area ul {
            padding-left: 20px;
        }
        .user-area li {
            cursor: pointer;
            padding: 2px 0;
        }
        .user-area li a {
            display: block;
        }
        .user-area li.selected {
            font-weight: bold;
            color: red;
        }
        .user-area li.selected a {
            color: red;
        }
        .my_table {
            font-size: 14px;
        }
        .select_all {
            float: right;
        }
        .select-all label {
            font-weight: normal;
            cursor: pointer;
        }
        .first_menu {
            background-color: #f1f7fd;
        }
        .first_menu td i {
            margin: 3px;
        }
        .table .first_children input[type='checkbox'] {
            margin: 0 5px;
        }
        .table .first_children label {
            {#font-weight: normal;#}
            margin-bottom: 0;
        }
        .table .first_children .second_menu_main {
            padding: 5px 0;
        }
        .table .first_children .third_menu_all {
            padding: 0 0 0 20px;
        }
        .table .first_children .third_menu_all .third_menu {
            display: inline-block;
            margin: 2px 5px;
        }
        .role_area tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }
    </style>

{% endblock %}

{% block content %}

    <div class="col-md-3 user-area">
        <div class="bs-example" data-example-id="table-within-panel">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <i class="fa fa-folder-open" aria-hidden="true"></i> 用户列表
                </div>
                <div class="panel-body">
                    <ul>
                        {% for row in user_list %}
                        <li class="{% if row.id == user_id %}selected{% endif %}">
                            <a href="?uid={{ row.id }}">{{ row.name }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3 role_area">
        <form method="post">
            {% csrf_token %}
            <div class="bs-example" data-example-id="table-within-panel">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <i class="fa fa-folder-open" aria-hidden="true"></i> 角色列表
                    {% if user_id %}
                    <button class="btn btn-success btn-xs" style="padding: 2px 8px;margin: -3px;float: right">
                        <i class="fa fa-save" aria-hidden="true"></i>
                        更新
                    </button>
                    {% endif %}
                </div>
                <div class="panel-body">
                    提示：点击用户后才能为其分配角色
                </div>
                <!-- Table -->
                <table class="table">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>选项</th>
                    </tr>
                    </thead>
                    <tbody>
                        {% for row in role_list %}
                        <tr class="{% if row.id == role_id %}active{% endif %}">
                            <td><a href="?rid={{ row.id }}">{{ row.title }}</a></td>
                            <td><input type="checkbox" name="roles" value="{{ row.id }}" {% if row.id in user_roles_dict %}checked{% endif %}></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        </form>
    </div>

    <div class="col-md-6">
        <form method="post">
            {% csrf_token %}
            <div class="bs-example" data-example-id="table-within-panel">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <i class="fa fa-folder-open" aria-hidden="true"></i> 权限分配
                    {% if role_id %}
                    <button class="btn btn-success btn-xs" style="padding: 2px 8px;margin: -3px;float: right">
                        <i class="fa fa-save" aria-hidden="true"></i>
                        更新
                    </button>
                    {% endif %}
                </div>
                <div class="panel-body">
                    提示：点击角色后才能为其分配权限
                </div>
                <table class="table my_table">
                    <tbody>
                        {% for item in first_menu_list %}
                        <tr class="first_menu">
                            <td>
                                <i class="fa fa-caret-down" aria-hidden="true"></i>
                                {{ item.title }}
                                <div class="select_all">
                                    <label for="select_all_{{ item.id }}">全选</label>
                                    <input id="select_all_{{ item.id }}" type="checkbox">
                                </div>
                            </td>
                        </tr>
                        <tr class="first_children">
                            <td>
                                {% for second in item.children %}
                                <div class="second_menu_main">
                                    <input id="per_{{ second.id }}" name="per" value="{{ second.id }}" type="checkbox" {% if second.id in all_per_dict %}checked{% endif %}>
                                    <label for="per_{{ second.id }}">{{ second.title }}（二级菜单）</label>
                                </div>
                                <div class="third_menu_all">
                                    {% for third in second.children %}
                                    <div class="third_menu">
                                        <input id="per_{{ third.id }}" name="per" type="checkbox" value="{{ third.id }}" {% if third.id in all_per_dict %}checked{% endif %}>
                                        <label for="per_{{ third.id }}">{{ third.title }}</label>
                                    </div>
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        </form>
    </div>

{% endblock %}

{% block js %}

<script>
    $('.select_all input:checkbox').change(function () {
        $(this).parents('.first_menu').next().find('input:checkbox').prop('checked', $(this).prop('checked'));
    })
</script>

{% endblock %}